import React from "react";
import './TodoFooter.css';

export default function TodoFooter(props) {
  //接受父级传入的 checkAllTodo
  let {checkAllTodo, todos, removeDoneTodos} = props;

  //声明函数 作为事件回调
  let checkAll = (e) => {
    checkAllTodo(e.target.checked);
  }

  //点击清理
  let clean = () => {
    removeDoneTodos();
  }

  return (
    <div className="todo-footer">
      <label>
        <input type="checkbox" 
          onChange={checkAll} 
          checked={todos.every(item => item.done ) && todos.length > 0} />
      </label>
      <span>
        <span>已完成 {todos.filter(item => item.done).length} </span> / 全部 {todos.length}
      </span>
      <button className="btn btn-danger" onClick={clean}>清除已完成任务</button>
    </div>
  );
}
